<template>
  <div>
    <div class="buttonView">
      <el-button type="success" @click="exportExcel">导出</el-button>
      <el-button type="primary" @click="exportWord">导出word</el-button>
      <el-button
        type="primary"
        @click="exportTableToWord"
      >导出table转成word</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%" :border="true">
        <el-table-column prop="shopName" label="商品名称" />
        <el-table-column prop="shopWorkNums" label="工单流水号" />
        <el-table-column prop="areaPer" label="送餐地址" />
        <el-table-column prop="username" label="订单人" />
        <el-table-column prop="shopNums" label="订单量" />
        <el-table-column prop="shopPrice" label="订单单价" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { asBlob } from 'html-docx-js-typescript'
import {
  getorderDataList,
  postDataList,
  getPcWordExport
} from '@/api/order/index'
export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      console.log(this.$store.state.user.name, 'store name')
      const obj = {
        username: this.$store.state.user.name
      }
      getorderDataList(obj).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data
        }
      })
    },
    add() {
      console.log('2200')
    },
    exportExcel() {
      const dataList = []
      const obj = {
        name: '工作薄',
        data: []
      }
      // 设置excel表格名称
      var List = document.querySelectorAll(
        '.el-table__header-wrapper .has-gutter th .cell'
      )
      const oneArr = []
      // 特殊设置第一列
      List.forEach((ele) => {
        oneArr.push(ele.innerHTML)
      })
      obj.data.push(oneArr)
      this.tableData.forEach((ele) => {
        const arr = []
        for (const key in ele) {
          arr.push(ele[key])
        }
        obj.data.push(arr)
      })
      dataList.push(obj)
      // 调取接口信息
      postDataList({ dataList }).then((res) => {
        // console.log(res, 'res')
        // const a = document.createElement('a')
        // a.download = '列表清单'
        // a.href = res.url
        // a.style.display = 'none'
        // document.body.appendChild(a)
        // a.click()

        console.log(res, '1111')
        const blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        console.log(blob, 'oopp')
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.download = '清单列表'
        a.href = url
        document.body.appendChild(a)
        a.click()
      })
    },
    exportWord() {
      const obj = {
        username: this.$store.state.user.name
      }
      getPcWordExport(obj).then((res) => {
        console.log(res)
        if (res.code == 200) {
          const htmlString = `
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
           <title>Document</title>
           <style>
           .content{
             width:100%;
           }
           .content-h1{
             width: 100%;
             text-align: center;
           }
           .content p{
            text-indent: 2em;
           }
          </style>
          </head>
          <body>
          <div class="content">
           <h1 class="content-h1" >财务综述</h1>
           <p>商家${res.data.username}，2024年共完成订单${res.data.total}元，较去年增长${res.data.precent}%。</P>
          </div>
      </body>
      </html>
      `
          const file = '财务综述' + '.docx'
          asBlob(htmlString).then((data) => {
            saveAs(data, file)
          })
        }
      })
    },
    exportTableToWord() {
      //   const table = document.querySelector('.table').outerHTML //转成文档对象
      //   const htmlString = `
      //       <!DOCTYPE html>
      //       <html lang="en">
      //       <head>
      //       <meta charset="UTF-8">
      //        <title>Document</title>
      //        <style>
      //        .content{
      //          width:100%;
      //        }
      //        .content-h1{
      //          width: 100%;
      //          text-align: center;
      //        }
      //        .content p{
      //         text-indent: 2em;
      //        }
      //       </style>
      //       </head>
      //       <body>
      //       <div class="content">
      //        ${table}
      //       </div>
      //   </body>
      //   </html>
      //   `

      //   console.log(table,'1111')
      //   asBlob(htmlString).then((data) => {
      //     saveAs(data, 'table.docx')
      //   })

      const table = document.createElement('table')
      table.classList.add('tables')
      const tr = document.createElement('tr')
      const tableContent = [
        '商品名称',
        '工单流水',
        '送餐地址',
        '订单人',
        '订单量',
        '订单单价'
      ]
      tableContent.forEach((ele) => {
        const th = document.createElement('th')
        th.innerHTML = ele
        tr.appendChild(th)
      })
      table.appendChild(tr)
      const bigArray = []
      this.tableData.forEach(ele => {
        for (const key in ele) {
          bigArray.push(ele[key])
        }
      })
      this.tableData.forEach((ele, i) => {
        const tr1 = document.createElement('tr')
        const indexArr = bigArray.slice(i * 6, (i + 1) * 6)
        indexArr.forEach(el => {
          const th1 = document.createElement('th')
          th1.innerHTML = el
          tr1.appendChild(th1)
        })
        table.appendChild(tr1)
      })
      const htmlString = `
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
           <title>Document</title>
           <style>
           .content{
             width:100%;
           }
          .tables{
            width:100%;
            table-layout:fixed;
          }
          .tables tr{
            width:100%;
          }
          .tables tr th{
            width:15%;
            word-break:break-all;
          }
          </style>
          </head>
          <body>
          <div class="content">
           ${table.outerHTML}
          </div>
      </body>
      </html>
      `
      console.log(table)
      this.$nextTick(() => {
        asBlob(htmlString).then((data) => {
          saveAs(data, 'table.docx')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/all.scss";
.buttonView {
  width: 60%;
  margin: $marginButton;
}
.table {
  width: 60%;
  margin: $marginBox;
}
</style>
